TreeGrid Gantt Chart Tutorial
7. Flags
Marking points in chart with defined text or tooltip
-
The flags represent custom marks on given dates that show their information as text or tooltip.
For math charts, to display values from source columns in chart use GanttPoints instead of GanttFlags.
The flag icon is centered to the one GanttUnits right to the flag date.
-
By
GanttFlagsType
specify if the flags in the cell will be shown as icon (1), text (2) or both (3)
-
Flags are defined by attribute
GanttFlags
.
The column should be defined as Type='Date' Range='1' Button='' - it should be type Date, but without calendar,
because selecting flag dates in calendar will break down the relation between flags and their texts and icons.
-
The flag information is defined in
GanttFlagTexts
.
It is also range cell, the individual texts are separated by semicolon.
The flag text must not contain semicolon. When edited in Gantt, the semicolon is replaced by comma.
The flag information can be shown as textbox right to the icon, by single textbox or as tooltip for the icon.
-
The flags can show
custom icons
instead of the default flag icon. And also custom CSS styles
for the flag text.
-
The icons for individual flags are defined by
GanttFlagIcons
attribute.
It is also range cell, the individual icons are separated by semicolon.
The icons are exact urls to the icon files, paths are relative to the actual page.
-
The actual CSS classes for individual flags are defined by
GanttFlagClasses
attribute.
It is also range cell, the individual classes are separated by semicolon.
The values are exact CSS class names. These CSS classes can be define in page embedded style or in external style sheet.
-
It is possible to let users to choose the custom icons and CSS classes for the flag.
The possible icons are defined in GanttFlagIconList
attribute. It is first character separated array, not range cell. It contains full urls of the icons.
Empty item value means default icon, '-' item value means no icon, only text.
The possible classes are defined in GanttFlagClassList
attribute. It is first character separated array, not range cell.
Users can choose the icon and class for the flag from gantt popup menu. The menu item texts are defined by GanttFlagIconNames
.
The item text can contain %1 string to be replaced by the icon and %2 and %3 to be replaced by <span> and </span> tags with custom CSS style.
-
Tooltip for the flags can be formatted by
GanttFlagsTip
to show specific information for the flag like its date, index and its information from GanttFlagTexts.
-
The flag content can be generated dynamically by JavaScript API.
The text HTML content can be created by OnGetGanttFlagText API event. The icon by OnGetGanttFlagIcon.
By API event OnGetGanttFlagIconHover is possible also to define or change icon shown on mouse hover.
- By default the texts in Gantt chart are shown above the Gantt objects. Set
GanttTextOverlay
='1' to suppress the behavior.
This setting can slow down the chart, so do it only if you really need it.
-
The Flags can be moved by mouse also to another row if set
GanttFlagsMove
='2'.
Only Run bars and Flags can be moved between rows. The Run bars can be moved also between grids, but Flags cannot.
The Flags dragging can be controlled by API events OnStartDragGantt, OnDragGantt and OnEndDragGantt
and also by events OnGanttFlagMove / OnGanttFlagMoved for moving between rows and OnGanttChange / OnGanttChanged for moving inside row.